<template>
	<view class="detail">
		<view class="detail-title">{{ article_info.title }}</view>
		<view class="detail-header">
			<view class="detail-header__logo"><image :src="article_info.author.avatar" mode="aspectFill"></image></view>
			<view class="detail-header__content">
				<view class="detail-header__content-title">{{ article_info.author.author_name }}</view>
				<view class="detail-header__content-info">
					<text>{{ article_info.create_time }}</text>
					<text>{{ article_info.browse_count }}浏览</text>
					<text>{{ article_info.thumbs_up_count }}赞</text>
				</view>
			</view>
			<button 
				class="detail-header__button" 
				type="default" 
				@click="follow(article_info.author.id)">
				{{ article_info.is_author_like ? '取消关注' : '关注' }}
			</button>
		</view>
		<view class="detail-content">
			<view class="detail-html">
				<!-- noData有问题，会一直显示，原因未知 -->
				<!-- <u-parse :content="article_info.content" :noData="noData"></u-parse> -->
				<u-parse v-if="article_info.content" :content="article_info.content" noData="<div></div>"></u-parse>
				<view class="detail-html__noData" v-html="noData" v-else>
					<!-- {{noData}} -->
				</view>
			</view>
			<view class="detail-comment">
				<view class="comment-title">最新评论</view>
				<view class="comment-content" v-for="item in commentsList" :key="item.comment_id"><comments-box :comments="item" @reply="reply"></comments-box></view>
			</view>
		</view>
		<view class="detail-bottom">
			<view class="detail-bottom__input" @click="openMask">
				<text>谈谈你的看法</text>
				<uni-icons type="compose" size="16" color="#F07373"></uni-icons>
			</view>
			<view class="detail-bottom__icons">
				<view class="detail-bottom__icons-box" @click="openComment"><uni-icons type="chat" size="22" color="#F07373"></uni-icons></view>
				<view class="detail-bottom__icons-box">
					<!-- 添加标记只是样式有问题需要修改 -->
					<likes :item="article_info" :isLike="like"></likes>
				</view>
				<view class="detail-bottom__icons-box" @click="update_thumbsup">
					<uni-icons :type="article_info.is_thumbs_up ? 'hand-thumbsup-filled' : 'hand-thumbsup'" size="22" color="#F07373"></uni-icons>
				</view>
			</view>
		</view>
		<!-- <uni-popup ref="popup" type="bottom" :maskClick="false">
			<view class="popup-wrap">
				<view class="popup-header">
					<text class="popup-header__item" @click="closeMask">取消</text>
					<text class="popup-header__item" @click="release">发布</text>
				</view>
				<view class="popup-content">
					<textarea class="popup-textarea" v-model="commentValue" placeholder="请输入评论内容" fixed maxlength="200" />
					<view class="popup-count">{{ commentValue.length }}/200</view>
				</view>
			</view>
		</uni-popup> -->
		<release ref="release"  @release='release'></release>
	</view>
</template>

<script>
import uParse from '@/components/gaoyia-parse/parse';
export default {
	name: 'home-detail',
	components: {
		uParse
	},
	onLoad(query) {
		const params = JSON.parse(decodeURIComponent(query.params));
		this.article_info = params;
		this.get_detail();
		this.getComments();
	},
	data() {
		return {
			article_info: {},
			noData: '<p style="text-align:center;color:#666">详情加载中...</p>',
			commentValue: '',
			commentsList: [],
			replyFormData: {},
			like: false
		};
	},
	methods: {
		get_detail() {
			this.$api
				.get_detail({
					article_id: this.article_info._id
				})
				.then(res => {
					this.article_info = res;
					console.log(res)
					this.like = res.is_like
				});
		},
		openMask() {
			this.$refs.release.openMask();
		},
		popupInput(value) {
			this.commentValue = value
		},
		// 发布
		release(content) {
			this.setUpdateComment({ content, ...this.replyFormData });
		},
		// 具体发布
		setUpdateComment(content) {
			const formdata = {
				article_id: this.article_info._id,
				...content
			};
			// console.log(formdata);
			uni.showLoading();
			this.$api
				.update_comment(formdata)
				.then(res => {
					uni.hideLoading();
					uni.showToast({
						title: '评论发布成功'
					});
					this.getComments();
					this.$refs.release.closeMask();
					this.commentValue = ''
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 请求评论内容
		getComments() {
			this.$api
				.get_comments({
					article_id: this.article_info._id
				})
				.then(res => {
					this.commentsList = res;
				});
		},
		// 点击回复
		reply(e) {
			this.replyFormData = {
				comment_id: e.comments.comment_id,
				is_reply: e.is_reply
			};
			if (e.comments.reply_id) {
				this.replyFormData.reply_id = e.comments.reply_id;
			}
			this.$refs.release.openMask();
		},
		// 点击关注
		follow(author_id) {
			this.setUpdateAuhtor(author_id);
		},
		// 关注作者
		setUpdateAuhtor(author_id){
			uni.showLoading()
			console.log(author_id, '....')
			this.$api.update_author({
				author_id
			}).then(res=>{
				uni.hideLoading()
				this.article_info.is_author_like = !this.article_info.is_author_like
				uni.$emit('update_author')
				uni.showToast({
					title:this.article_info.is_author_like?'关注作者成功':'取消关注作者',
					icon:'none'
				})
			})
		},
		// 点赞
		update_thumbsup() {
			uni.showLoading()
			this.$api.update_thumbsup({
				article_id: this.article_info._id
			}).then(data => {
				if(!this.article_info.is_thumbs_up) {
					this.article_info.is_thumbs_up = !this.article_info.is_thumbs_up
					uni.showToast({
						title: '点赞成功',
						icon: 'none'
					})
				}else {
					uni.showToast({
						title: '你已经点过赞了',
						icon: 'none'
					})
				}
				uni.hideLoading()
			}).catch(() => {
				uni.hideLoading()
			})
		},
		// 打开评论页面
		openComment() {
			uni.navigateTo({
				url:'/pages/detail-comments/detail-comments?id='+this.article_info._id
			})
		}
	}
};
</script>
<style lang="scss">
.detail {
	padding: 15px 0;
	padding-bottom: 54px;
}

.detail-title {
	padding: 0 15px;
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.detail-header {
	display: flex;
	align-items: center;
	margin-top: 10px;
	padding: 0 15px;

	.detail-header__logo {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.detail-header__content {
		width: 100%;
		padding-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 12px;

		.detail-header__content-title {
			font-size: 14px;
			color: #333;
		}

		.detail-header__content-info {
			color: #999;

			text {
				margin-right: 10px;
			}
		}
	}
	.detail-header__button {
		flex-shrink: 0;
		height: 30px;
		line-height: 30px;
		border-radius: 5px;
		padding: 0 15px;
		font-size: 12px;
		color: #fff;
		background-color: $news-color;
	}
}

.detail-content {
	margin-top: 20px;
	min-height: 500px;
	.detail-html {
		padding: 0 15px;
		font-size: 16px;
		.detail-html__noData {
			padding-bottom: 0.5em;
			clear: both;
			text-align: center;
			color: rgb(102, 102, 102);
			color: black;
		}
	}
	.detail-comment {
		margin-top: 30px;
		.comment-title {
			padding: 10px 15px;
			font-size: 14px;
			color: #666;
			border-bottom: 1px #f5f5ff solid;
		}
		.comment-content {
			padding: 0 15px;
			border-top: 1px #eee solid;
		}
	}
}

.detail-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 44px;
	border-top: 1px #f5f5f5 solid;
	background-color: #fff;
	box-sizing: border-box;

	.detail-bottom__input {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 10px;
		padding: 0 10px;
		width: 100%;
		height: 30px;
		border: 1px #ddd solid;
		border-radius: 5px;

		text {
			font-size: 14px;
			color: #999;
		}
	}

	.detail-bottom__icons {
		display: flex;
		flex-shrink: 0;
		padding: 0 10px;

		.detail-bottom__icons-box {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 44px;
		}
	}
}
</style>
